{% extends "admin/base.html" %}


{% block content_main %}
<form class="layui-form" action="/admin/add_student" method="post">
  <div class="layui-form-item">
    <label class="layui-form-label">添加学生</label>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">班级</label>
    <div class="layui-input-block">
      <select name="id_classes" lay-verify="required">
          <option value=""></option>
          {% for i in classes[::-1] %}
            <option value="{{ i.id }}">{{ i.name }}</option>
          {% endfor %}
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">账号</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" autocomplete="off" placeholder="请输入账号" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="text" name="password" lay-verify="required" autocomplete="off" placeholder="请输入密码" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入姓名" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">短信号码</label>
      <div class="layui-input-inline">
        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">家长电话</label>
      <div class="layui-input-inline">
        <input type="tel" name="parent_phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">年龄</label>
      <div class="layui-input-inline">
        <input type="text" name="age" lay-verify="required" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">材料费</label>
      <div class="layui-input-inline">
        <input type="text" name="material_cost" lay-verify="required" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
      <button class="layui-btn" type="button" lay-submit lay-filter="demo1">提交</button>
    </div>
  </div>
</form>
{% endblock %}


{% block script %}
<script>
layui.use(['form', 'util', 'laydate'], function(){
  var form = layui.form;
  var laydate = layui.laydate;

  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });

  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [
      /^[\S]{6,12}$/
      ,'密码必须6到12位，且不能出现空格'
    ]
  });

  //提交事件
  form.on('submit(demo1)', function(data){
    alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    $.post(
        "/admin/add_student",
        {
            id_classes: data.field.id_classes,
            username: data.field.username,
            password: data.field.password,
            name: data.field.name,
            phone: data.field.phone,
            parent_phone: data.field.parent_phone,
            age: data.field.age,
            material_cost: data.field.material_cost
        },
        function (data, status) {
            if(data.code == 0){
                layer.msg(data.msg, {icon: 1});
            }else {
                layer.alert(data.msg, {icon: 5});
            }
        }
    );
    return false;
  });

});
</script>
{% endblock %}